<template>
	<view class="page-body">
		<!-- 页面内容开始 -->

		<!-- 表格搜索组件开始 -->
		<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" @search="search"></vk-data-table-query>
		<!-- 表格搜索组件结束 -->

		<!-- 自定义按钮区域开始 -->
		<view>
			<el-row>
				<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
				<!-- 批量操作 -->
				<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx" :disabled="table1.multipleSelection.length === 0">
						批量操作
						<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量操作1</el-dropdown-item>
						<el-dropdown-item :command="2">批量操作2</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<!-- 表格组件开始 -->
		<vk-data-table
			ref="table1"
			:action="table1.action"
			:columns="table1.columns"
			:query-form-param="queryForm1"
			:right-btns="['detail_auto', 'update', 'delete']"
			:selection="true"
			:row-no="true"
			:pagination="true"
			@update="updateBtn"
			@delete="deleteBtn"
			@current-change="currentChange"
			@selection-change="selectionChange"
		></vk-data-table>
		<!-- 表格组件结束 -->

		<!-- 添加或编辑的弹窗开始 -->
		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1300px" mode="form" :close-on-click-modal="false">
			<vk-data-form
				v-model="form1.data"
				:rules="form1.props.rules"
				:action="form1.props.action"
				:form-type="form1.props.formType"
				:columns="form1.props.columns"
				label-width="80px"
				@success="
					form1.props.show = false;
					refresh();
				"
			>
			 <!-- 其他配置 -->
			  <template v-slot:hour_backhaul="{ form, keyName }">
			    <view style="display: flex; align-items: center;">
			      <!-- 输入框 -->
			      <input v-model="form[keyName]" type="number" placeholder="输入小时">
			      <!-- 标题 -->
			      <text style="margin-left: 10px;">小时内订单回传</text>
			    </view>
			  </template>
			</vk-data-form>
		</vk-data-dialog>

		<!-- 添加或编辑的弹窗结束 -->

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据

export default {
	data() {
		// 页面数据变量
		return {
			// 页面是否请求中或加载中
			loading: false,
			// init请求返回的数据
			data: {},
			// 表格相关开始 -----------------------------------------------------------
			table1: {
				// 表格数据请求地址
				action: 'admin/dls/kh/configBackup/getList',
				// 表格字段显示规则
				columns: [
					{
						key: 'remark',
						title: '备注',
						type: 'text',
						width: 200
					},
					{
						key: '_id',
						title: 'ID',
						type: 'text',
						width: 200
					},
					{
						key: 'adPlatform',
						title: '广告平台',
						type: 'text',
						width: 200
					},
					{
						key: 'transmitOrders',
						title: '是否回传当日新用户订单',
						type: 'switch',
						width: 200
					},
					{
						key: 'firstOrder',
						title: '是否回传首笔订单',
						type: 'switch',
						width: 200
					},
					{
						key: 'firstOrderNumber',
						title: '先回传固定笔数',
						type: 'number',
						width: 200
					},
					// { "key": "hour_backhaul", "title": "小时回传", "type": "text", "width": 200 },
					{
						key: 'backup_two',
						title: '配置项在详情查看',
						type: 'text',
						width: 200
					},
					{
						key: 'backup',
						title: '配置项',
						type: 'table',
						width: 200,
						show: ['detail'],
						rowHeight: 50, // 行高
						columns: [
							{
								key: 'minAmount',
								title: '最低价格',
								type: 'money',
								width: 120
							},
							{
								key: 'maxAmount',
								title: '最高价格',
								type: 'money',
								width: 120
							},
							{
								key: 'reportCount',
								title: '满',
								type: 'number',
								width: 120
							},
							{
								key: 'skipCount',
								title: '漏',
								type: 'number',
								width: 120
							},
							{
								key: 'isBackhaul',
								title: '回传方式',
								type: 'radio',
								width: 120,
								defaultValue: 3,
								data: [
									{
										value: 1,
										label: '全部上报'
									},
									{
										value: 2,
										label: '全部不上报'
									},
									{
										value: 3,
										label: '自定义'
									}
								]
							}
						]
					},
					{
						key: 'douyinUrl',
						title: '抖音URL',
						type: 'text',
						width: 200
					},
					{
						key: 'douyinToken',
						title: '抖音Token',
						type: 'text',
						width: 200
					},
					{
						key: 'baiduToken',
						title: '百度Token',
						type: 'text',
						width: 200
					},
					// { "key": "_add_time", "title": "时间戳", "type": "time", "width": 200 },
					{
						key: '_add_time_str',
						title: '添加时间字符串',
						type: 'text',
						width: 200
					}
				],
				// 多选框选中的值
				multipleSelection: [],
				// 当前高亮的记录
				selectItem: ''
			},
			// 表格相关结束 -----------------------------------------------------------
			// 表单相关开始 -----------------------------------------------------------
			// 查询表单请求数据
			queryForm1: {
				// 查询表单数据源，可在此设置默认值
				formData: {},
				// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{
						key: '_id',
						title: 'ID，系统自动生成',
						type: 'text',
						width: 200,
						mode: '='
					},
					{
						key: 'adPlatform',
						title: '广告平台',
						type: 'text',
						width: 200,
						mode: '='
					},

					//{"key":"expire_time","title":"过期时间","type":"datetimerange","width":200,"mode":"="},
					//{"key":"detail","title":"配置项","type":"text","width":200,"mode":"="},
					{
						key: '_add_time',
						title: '时间戳',
						type: 'datetimerange',
						width: 400,
						mode: '[]'
					}
					// { "key": "_add_time_str", "title": "添加时间字符串", "type": "text", "width": 400, "mode": "=" }
				]
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					//先回传的笔数
					firstOrderNumber: 10,
					remark: '', // 备注
					// hour_backhaul: 24, // 小时回传
					adPlatform: '', // 广告平台
					transmitOrders: false, // 是否回传当日新用户订单
					firstOrder: false, // 是否回传首笔订单
					backup: [],
					//价格区间
					douyinUrl: '', // 抖音URL
					douyinToken: '', // 抖音Token
					baiduToken: '', // 百度Token
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: '',
					// 表单字段显示规则
					columns: [
						{
							key: 'adPlatform',
							title: '广告平台',
							type: 'select',
							width: 200,
							data: [
								{
									label: '抖音',
									value: 'douyin'
								},
								{
									label: '腾讯',
									value: 'tencent'
								},
								{
									label: '快手',
									value: 'kuaishou'
								},
								{
									label: '百度',
									value: 'baidu'
								},
								
								
								
							]
						},
						// { "key": "hour_backhaul", "title": "小时回传", "type": "number", "width": 200 },
						{
							key: 'transmitOrders',
							title: '是否回传当日新用户订单',
							type: 'switch',
							labelWidth: 180
						},
						{
							key: 'hour_backhaul',
							title: '设置用户注册',
							labelWidth: 100,
							type: 'number',
							showRule: (formData) => {
								if (formData.transmitOrders == true) {
									return false;
								}
							}
						},
						{
							key: 'firstOrder',
							title: '是否回传首笔订单',
							type: 'switch',
							labelWidth: 140
						},
						{
							key: 'firstOrderNumber',
							title: '先固定回传笔数',
							type: 'number',
							labelWidth: 130
						},

						{
							key: 'backup',
							title: '',
							type: 'array<object>',
							itemWidth: 120,
							showAdd: true,
							showClear: true,
							// 新增一行时,该行的默认值
							defaultValue: {
								switch: true,
								text1: ''
							},
							rightBtns: ['delete'],
							// 每行每个字段对应的渲染规则
							columns: [
								{
									key: 'minAmount',
									title: '最低价格',
									type: 'money',
									rules: [
										{
											required: true,
											message: '该项不能为空',
											trigger: ['change', 'blur']
										}
									]
								},
								{
									key: 'maxAmount',
									title: '最高价格',
									type: 'money',
									rules: [
										{
											required: true,
											message: '该项不能为空',
											trigger: ['change', 'blur']
										}
									]
								},
								{
									key: 'proportion_value',
									title: '',
									type: 'number',
									defaultValue: 0,
									showRule: (formData) => {
										return false;
									}
								},
								{
									key: 'reportCount',
									title: '满',
									type: 'number',
									rules: [],
									disabled: (formData) => {
										if (formData.isBackhaul != 3) {
											return true;
										} else {
											return false;
										}
									}
								},
								{
									key: 'skipCount',
									title: '漏',
									type: 'number',
									rules: [],
									disabled: (formData) => {
										if (formData.isBackhaul != 3) {
											return true;
										} else {
											return false;
										}
									}
								},
								{
									key: 'isBackhaul',
									title: '设置上报模式',
									type: 'radio',
									defaultValue: 3,
									data: [
										{
											value: 1,
											label: '全部上报'
										},
										{
											value: 2,
											label: '全部不上报'
										},
										{
											value: 3,
											label: '自定义'
										}
									]
								}
							]
						},
						{
							key: 'douyinUrl',
							title: '抖音URL',
							type: 'text',
							width: 200,
							showRule: 'adPlatform == douyin'
						}, // 默认隐藏
						{
							key: 'douyinToken',
							title: '抖音Token',
							type: 'text',
							width: 200,
							showRule: 'adPlatform == douyin'
						}, // 默认隐藏
						{
							key: 'baiduToken',
							title: '百度Token',
							type: 'text',
							width: 200,
							showRule: 'adPlatform == baidu'
						}, // 默认隐藏// 默认隐藏
						{
							key: 'remark',
							title: '备注',
							type: 'text',
							width: 200
						} // 默认隐藏
						// ...
					],
					// 表单验证规则
					rules: {},
					// add 代表添加 update 代表修改
					formType: '',
					// 是否显示表单的弹窗
					show: false
				}
			},
			// 其他弹窗表单
			formDatas: {}
			// 表单相关结束 -----------------------------------------------------------
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		vk = that.vk;
		that.options = options;
		that.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			originalForms['form1'] = vk.pubfn.copyObject(that.form1);
		},
		// 页面跳转
		pageTo(path) {
			vk.navigateTo(path);
		},
		// 表单重置
		resetForm() {
			vk.pubfn.resetForm(originalForms, that);
		},
		// 搜索
		search() {
			that.$refs.table1.search();
		},
		// 刷新
		refresh() {
			that.$refs.table1.refresh();
		},
		// 获取当前选中的行的数据
		getCurrentRow() {
			return that.$refs.table1.getCurrentRow();
		},
		// 监听 - 行的选中高亮事件
		currentChange(val) {
			that.table1.selectItem = val;
		},
		// 当选择项发生变化时会触发该事件
		selectionChange(list) {
			that.table1.multipleSelection = list;
		},
		// 显示添加页面
		addBtn() {
			that.resetForm();
			that.form1.props.action = 'admin/dls/kh/configBackup/add';
			that.form1.props.formType = 'add';
			that.form1.props.title = '添加';
			that.form1.props.show = true;
		},
		// 显示修改页面
		updateBtn({ item }) {
			that.form1.props.action = 'admin/dls/kh/configBackup/update';
			that.form1.props.formType = 'update';
			that.form1.props.title = '编辑';
			that.form1.props.show = true;
			that.form1.data = item;
		},
		// 删除按钮
		deleteBtn({ item, deleteFn }) {
			deleteFn({
				action: 'admin/dls/kh/configBackup/delete',
				data: {
					_id: item._id
				}
			});
		},
		// 监听 - 批量操作的按钮点击事件
		batchBtn(index) {
			switch (index) {
				case 1:
					vk.toast('批量操作按钮1');
					break;
				case 2:
					vk.toast('批量操作按钮2');
					break;
				default:
					break;
			}
		}
	},
	// 监听属性
	watch: {},
	// 过滤器
	filters: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.page-body {
}
</style>
